<template>
  <div class="edit-title">
    <span>账号安全</span>
  </div>
  <div>
    <el-menu class="security-menu">
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="phone" class="pass"></span>
            <span v-else class="warning"></span>
            <p>绑定手机</p>
          </div>
          <div class="info">
            <p v-if="phone">{{phone}}</p>
            <p v-else>未绑定</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="phone" >更换手机</router-link>
              <router-link  to="" v-else>绑定手机</router-link >
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="email" class="pass"></span>
            <span v-else class="warning"></span>
            <p>绑定邮箱</p>
          </div>
          <div class="info">
            <p v-if="email">{{email}}</p>
            <p v-else>未绑定</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link  to="" v-if="email">更换邮箱</router-link >
              <router-link  to="" v-else>绑定邮箱</router-link >
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="wechat" class="pass"></span>
            <span v-else class="warning"></span>
            <p>绑定微信</p>
          </div>
          <div class="info">
            <p v-if="wechat">{{wechat}}</p>
            <p v-else>未绑定</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link  to="" v-if="wechat">更换微信</router-link>
              <router-link  to="" v-else>绑定微信</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="qq" class="pass"></span>
            <span v-else class="warning"></span>
            <p>绑定QQ</p>
          </div>
          <div class="info">
            <p v-if="qq">{{qq}}</p>
            <p v-else>未绑定</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="qq">更换QQ</router-link>
              <router-link to="" v-else>绑定QQ</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="sina" class="pass"></span>
            <span v-else class="warning"></span>
            <p>绑定新浪微博</p>
          </div>
          <div class="info">
            <p v-if="sina">{{sina}}</p>
            <p v-else>未绑定</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="sina">更换绑定</router-link>
              <router-link to="" v-else>去绑定</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="existsPassword" class="pass"></span>
            <span v-else class="warning"></span>
            <p>设置密码</p>
          </div>
          <div class="info">
            <p v-if="existsPassword">密码已设置</p>
            <p v-else>密码未设置</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="existsPassword">更换密码</router-link>
              <router-link to="" v-else>设置密码</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="isProtectPassword" class="pass"></span>
            <span v-else class="warning"></span>
            <p>设置密保</p>
          </div>
          <div class="info">
            <p v-if="isProtectPassword">密保已设置</p>
            <p v-else>密保未设置</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="isProtectPassword">更换密保</router-link>
              <router-link to="" >设置密保</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item>
        <div>
          <div class="prompt">
            <span v-if="realName" class="pass"></span>
            <span v-else class="warning"></span>
            <p>实名认证</p>
          </div>
          <div class="info">
            <p v-if="realName">{{realName}}</p>
            <p v-else>未实名认证</p>
          </div>
          <div class="security-menu-action">
            <p>
              <router-link to="" v-if="realName">查看实名</router-link>
              <router-link to="" v-else>去实名</router-link>
            </p>
          </div>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
const { getBindExtendAccount } = require('@/services/index/personalCentre/personalCenter')
const { bindExtendAccount } = require('@/services/index/personalCentre/personalCenter')

export default {
  name: 'AccountSecurity',
  data () {
    return {
      phone: '',
      email: '',
      wechat: '',
      qq: '',
      sina: '',
      existsPassword: false,
      isProtectPassword: false,
      realName: ''
    }
  },
  created () {
    this.queryExtendAInfo()
  },
  methods: {
    /**
     * 查询绑定账号
     * */
    queryExtendAInfo () {
      getBindExtendAccount().then((res) => {
        if (res.code !== 10000) {
          this.$message.error('查询绑定信息失败')
          return
        }
        const data = res.data
        this.phone = data.phone
        this.email = data.email
        this.wechat = data.wechat
        this.qq = data.qq
        this.sina = data.microBlog
      })
    },
    /**
     * 绑定账号
     * */
    bindExtendAccount (value) {
      const formData = {

      }
      const data = JSON.stringify(formData)
      bindExtendAccount(data).then((res) => {
        if (res.code !== 10000) {
          this.$message.error('绑定失败')
          return
        }
        this.$message.success('绑定成功')
        // this.reload()
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "accountSecurity";
</style>
